<template>
  <div>
    <el-card>
        <div slot="header">
            <span class="title">评价</span>
            <el-button class="bt" type="text" @click="summit">提交</el-button>
        </div>
        <el-form :model="form" class="" label-width="100px" label-position="left">
            <el-form-item label="评分">
                <div class="rate">
                    <el-rate v-model="form.star" show-text></el-rate>
                </div>
            </el-form-item>
            <el-form-item label="评论">
                <el-input type="textarea" v-model="form.content" :rows="5" maxlength="500" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="晒图">
                <div class="add">
                    <div class="images" v-if="imgList.length > 0">
                        <div class="img" v-for="obj,id in imgList" :key="id">
                            <img v-lazy="obj.photo_url">
                            <div class="shade">
                            <i class="el-icon-delete" @click="deleteImage(id)"></i>
                            </div>
                        </div>
                    </div>
                    <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        :http-request="httpRequestFn"
                        :disabled="imgList.length > 3"
                        :limit="1">
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </div>
            </el-form-item>
        </el-form>
    </el-card>
  </div>
</template>

<script>
import { upLoadPicture } from '@/utils/utils'
export default {
    data() {
        return {
            form:{
                star: 5,
                content:'',
            },
            imgList: [],
        }
    },
    methods: {
        summit() {
            let order = {}
            let cid = ''
            this.$API.getOneProductOrder(this.$store.state.params.oid).then(res => {
                if (res.status == 200) {
                    order = res.data
                    let obj = {...this.form}
                    obj['comment_time'] = new Date()
                    obj['account_id'] = this.$store.state.user.account_id
                    obj['product_specification_id'] = res.data.product_specification_id
                    return this.$API.addProductComment(obj)
                }
            }).then(res => {
                if (res.status == 201) {
                    cid = res.data.id
                    let taskList = []
                    if (this.imgList.length > 0) {
                        for (let obj of this.imgList) {
                            obj["product_comment_id"] = cid
                            taskList.push(this.$API.addProductCommentPhotos(obj))
                        }
                        return Promise.all(taskList)
                    }
                    return res
                }
            }).then(res => {
                if (res.constructor == Array) {
                    let result = true
                    res.forEach(item => result = result & item.status == 201)
                    if (!result) this.$message.error('图片上传失败')
                } 
                order['product_comment_id'] = cid
                return this.$API.modifyProductOrder(order, order.id)
            }).then(res => {
                if (res.status == 200) {
                    this.$message.success('评价完成')
                    this.$router.go(-1)
                }
            })
        },
        // 删除图片
        deleteImage(id) {
            this.imgList.splice(id, 1)
        },
        httpRequestFn(res) {
            upLoadPicture(res, url => {
                this.imgList.push({
                "photo_url": url
                })
            })
        },
    },
    created() {
    }
}
</script>

<style lang="less" scoped>
.title{
    color: @color-theme;
}
.bt{
    float: right;
    padding: 0;
}
.rate{
    display: inline-block;
    user-select: none;
}
.add{
    display: flex;
    user-select: none;
    .tips{
    display: flex;
    flex-direction: column-reverse;
    padding-left: 20px;
    }
    .avatar-uploader {
    width: 100px;
    height: 100px;
    /deep/ .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .el-upload:hover {
        border-color: #409eff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #3264a9;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }
    }
    margin-bottom: 20px;
}
.images{
    height: 100px;
    display: flex;
    .img{
    position: relative;
    margin-right: 20px;
    img{
        height: 100px;
    }
    &:hover .shade{
        display: flex;
    }
    .shade{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        background: rgba(0,0,0,0.5);
        z-index: 2;
        i{
        font-size: 30px;
        color: #E6A23c;
        }
        display: none;
    }
    }
}
</style>